<script>
import {
  Avatar,
  CircleCloseFilled,
  FullScreen,
  Link,
  Microphone,
  Mute,
  Position,
  Star,
  VideoPause,
  VideoPlay
} from "@element-plus/icons-vue";
import {nextTick, ref, watch} from "vue";
import router from "../../../router/index.js";
import {
  collectTargetVideo,
  getAiRecommendVideo, getVideoCollectState,
  getVideoInfoById,
  stopRealTimeASR
} from "../../../api/video/VideoPlayPage.js";
import {ElMessage, ElNotification} from "element-plus";
import {fetchEventSource} from "@microsoft/fetch-event-source";

export default {
  name: 'videoPlayPage',
  components: {Link, Avatar, FullScreen, Position, Mute, Microphone, VideoPause, CircleCloseFilled, Star, VideoPlay},
  computed: {
    Star() {
      return Star
    }
  },
  setup()
  {
    /*--------------变量---------------*/
    // 定义canvas
    let canvas;
    let ctx;
    let videoPlayer;
    //当前颜色
    var nowColor = ref('#409EFF')
    // 保存弹幕的数组
    var texts = [];
    // 当前输入的弹幕
    let nowText = ref('');
    // 视频内容
    let videoContent = ref();
    // 当前视频信息
    let videoInfo = ref({});
    // 视频标签
    let tagItems = ref([]);
    // 视频是否在播放 用于切换图标
    let playing = ref(false);
    // 音量大小
    let volumeValue = ref(100);
    // 当前视频播放持续时间
    let videoPlayingDuration = ref(0);
    // 视频总长度
    let videoSumDuration = ref();
    // 鼠标是否移入了音量调整框
    let hasEnterVolume = ref(false);
    // 鼠标预览的视频时间是多少
    let targetTime = ref();
    // 存储ai推荐的视频列表
    let aiRecommendVideoList = ref([]);
    // 当前视频是否被收藏
    let collectState = ref();
    const controller = new AbortController()
    /*--------------常用方法---------------*/
    // 鼠标移入视频显示进度条 隐藏下方小进度条
    function videoChangeActive(e) {
      let controlTop = document.querySelector('.video-player-control-top')
      controlTop.style.opacity = 1;
      controlTop.style.visibility = 'visible';
      let controlBottom =  document.querySelector('.video-player-control-bottom')
      controlBottom.style.opacity = 1;
      let shadowProgress = document.querySelector('.video-player-shadow-progress-area')
      shadowProgress.style.opacity = 0;
      shadowProgress.style.visibility = 'hidden';
    }
    // 鼠标移出视频隐藏进度条 显示下方小进度条
    function videoRemoveActive(e) {
      let controlTop = document.querySelector('.video-player-control-top')
      controlTop.style.opacity = 0;
      controlTop.style.visibility = 'hidden';
      let controlBottom =  document.querySelector('.video-player-control-bottom')
      controlBottom.style.opacity = 0;
      let shadowProgress = document.querySelector('.video-player-shadow-progress-area')
      shadowProgress.style.opacity = 1;
      shadowProgress.style.visibility = 'visible';
    }
    // 鼠标移入音量显示音量控制面板
    function volumeChangeActive(e) {
      let volumeControl = document.querySelector('.video-player-ctrl-volume-box')
      volumeControl.style.display = 'block';
    }
    // 鼠标移除音量隐藏控制面板
    function volumeRemoveActive(e) {
      let volumeControl = document.querySelector('.video-player-ctrl-volume-box')
      setTimeout(() => {
        if ( !hasEnterVolume.value ) {
          volumeControl.style.display = 'none';
        }
      },3000);
    }
    function volumeControlChangeActive(e) {
      hasEnterVolume.value = true;
    }
    function volumeControlRemoveActive(e) {
      let volumeControl = document.querySelector('.video-player-ctrl-volume-box')
      volumeControl.style.display = 'none';
      hasEnterVolume.value = false;
    }
    // 判断是否暂停进而显示暂停图标
    function videoPaused() {
      let videoStateIcon = document.querySelector('.video-player-state-play');
      videoStateIcon.style.display = 'block'
    }
    function videoPlayed() {
      let video = document.getElementById('video_html5_api');
      let videoStateIcon = document.querySelector('.video-player-state-play');
      videoStateIcon.style.display = 'none'
      videoSumDuration.value = video.duration;
      // 转换为整数
      videoSumDuration.value = Math.floor(videoSumDuration.value);
    }
    function videoTimeUpdate() {
      let video = document.getElementById('video_html5_api');
      videoPlayingDuration.value = video.currentTime;
      // 转换为整数
      videoPlayingDuration.value = Math.floor(videoPlayingDuration.value);
      // 当前进度
      let videoProgressCurrent = document.querySelector('.video-player-progress-schedule-current')
      videoProgressCurrent.style.transform = "scaleX(" + videoPlayingDuration.value/videoSumDuration.value + ")";
      // 缓存进度条
      let videoProgressBuffer = document.querySelector('.video-player-progress-schedule-buffer')
      videoProgressBuffer.style.transform = "scaleX(" + video.buffered.end(0)/videoSumDuration.value + ")";
      // 最底部播放进度条
      let videoShadowProgressCurrent = document.querySelector('.video-player-shadow-progress-schedule-current')
      videoShadowProgressCurrent.style.transform = "scaleX(" + videoPlayingDuration.value/videoSumDuration.value + ")";
      // 最底部缓存进度条
      let videoShadowProgressBuffer = document.querySelector('.video-player-shadow-progress-schedule-buffer')
      videoShadowProgressBuffer.style.transform = "scaleX(" + video.buffered.end(0)/videoSumDuration.value + ")";
      // 当前进度条指示图标
      let thumbIcon = document.querySelector('.video-player-progress-thumb');
      let progress = document.querySelector('.video-player-progress');
      let progressWidth = window.getComputedStyle(progress).width
      // 去掉px
      progressWidth = progressWidth.replace('px', '');
      // 转化为数字类型
      progressWidth = parseInt(progressWidth);
      // 去掉px 转换为整数
      progressWidth = Math.floor(progressWidth);
      thumbIcon.style.transform = "translateX(" + (videoPlayingDuration.value/videoSumDuration.value) * progressWidth + "px)";
    }
    function videoClick() {
      let video = document.getElementById('video_html5_api');
      if (video.paused) {
        playing.value = true;
        video.play();
      } else {
        playing.value = false;
        video.pause();
      }
    }
    function videoFullScreen() {
      var video = document.getElementById("video_html5_api");
      if (video.requestFullscreen) {
        video.requestFullscreen();
      }
    }
    function progressMove(e) {
      let moveIndicator = document.querySelector('.video-player-progress-move-indicator');
      let left = Math.floor(e.pageX) - 53;
      moveIndicator.style.left = left + 'px';
      // 计算鼠标所在的视频时间
      let progress = document.querySelector('.video-player-progress');
      let progressWidth = window.getComputedStyle(progress).width
      // 去掉px
      progressWidth = progressWidth.replace('px', '');
      // 转化为数字类型
      progressWidth = parseInt(progressWidth);
      // 去掉px 转换为整数
      progressWidth = Math.floor(progressWidth);
      targetTime.value = (left/progressWidth) * videoSumDuration.value;
      targetTime.value = Math.floor(targetTime.value)
      // 实时移动预览时间展示框
      let targetTimeDom = document.querySelector('.video-player-progress-popup');
      targetTimeDom.style.left = left + 'px';
    }
    function progressChangeActive(e) {
      let moveIndicator = document.querySelector('.video-player-progress-move-indicator');
      moveIndicator.style.opacity = 1;
      moveIndicator.style.visibility = 'visible';
      let thumbIcon = document.querySelector('.video-player-progress-thumb-icon');
      thumbIcon.style.opacity = 1;
      thumbIcon.style.visibility = 'visible';
      let targetTimeDom = document.querySelector('.video-player-progress-popup');
      targetTimeDom.style.display = 'block';
    }
    function progressRemoveActive(e) {
      let moveIndicator = document.querySelector('.video-player-progress-move-indicator');
      moveIndicator.style.opacity = 0;
      moveIndicator.style.visibility = 'hidden';
      let thumbIcon = document.querySelector('.video-player-progress-thumb-icon');
      thumbIcon.style.opacity = 0;
      thumbIcon.style.visibility = 'hidden';
      let targetTimeDom = document.querySelector('.video-player-progress-popup');
      targetTimeDom.style.display = 'none';
    }
    // 点击进度条调到指定时间
    function jumpToTargetTime(e) {
      let video = document.getElementById('video_html5_api');
      video.currentTime = targetTime.value;
    }
    // 格式化视频时间
    function formatDuration(time){
      if(time > -1){
        var hour = Math.floor(time/3600);
        var min = Math.floor(time/60) % 60;
        var sec = time % 60;
        if(hour < 10) {
          time = '0'+ hour + ":";
        } else {
          time = hour + ":";
        }

        if(min < 10){
          time += "0";
        }
        time += min + ":";

        if(sec < 10){
          time += "0";
        }
        time += sec;
      }
      return time;
    }
    async function backHome() {
      await stopRealTimeASR()
      controller.abort()
      router.push("/home")
    }
    function jumpToRecommendVideo(id) {
      router.push("/student/playVideo/" + id)
    }
    function prepareForFire() {
      canvas = document.querySelector('canvas');
      ctx = canvas.getContext('2d');
      videoPlayer = document.getElementById('video_html5_api')
      // 画布宽高
      canvas.width = videoPlayer.videoWidth;
      canvas.height = videoPlayer.videoHeight;
      update();
    }
    // 发射弹幕
    function fire() {
      // 判断文本是否为空
      if(nowText.value !== ''){
        //给弹幕数组添加这一文本
        texts.push({
          txt:nowText.value,
          //该弹幕生成的（x，y）位置
          x:canvas.width,
          // 给个随机值
          y:Math.random()*(canvas.height-16)+16,
          // 弹幕颜色为当前颜色
          color:nowColor.value
        })
        console.log(nowText.value)
        console.log(nowColor.value)
        // 清空输入框
        nowText.value = '';
      }
    }
    // 实现弹幕滚动效果
    function update(){
      // 清除画布
      ctx.clearRect(0,0,canvas.width,canvas.height);
      // 改变弹幕数组里每一条弹幕位置，x值减少就好
      for(let i=0;i<texts.length;i++){
        texts[i].x -= 1;
        // 若已移出视频很远了，删除弹幕数组元素
        if(texts[i].x<-500) texts.splice(i,1);
      }
      // 绘制文字
      texts.forEach(item=>{
        ctx.font = "18px Arial";
        //颜色
        ctx.fillStyle = item.color;
        //位置
        ctx.fillText(item.txt,item.x,item.y);
      })
      // 执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
      window.requestAnimationFrame(update);
    }
    /*--------------请求方法---------------*/
    getVideoCollectState(router.currentRoute.value.params.id).then(response => {
      collectState.value = response.data;
    })
    // 当进入网页时 获取当前视频信息
    getVideoInfoById(router.currentRoute.value.params.id).then(response=> {
      videoInfo.value = response.data;
      for ( let i = 0 ; i < videoInfo.value.tag.split(',').length - 1 ; i ++ ) {
        tagItems.value.push(videoInfo.value.tag.split(',')[i]);
      }
      // 实时语音转写 获取视频内容
      fetchEventSource("/api/aiChat/realTimeASR?source="+videoInfo.value.source,{
        method: 'GET',
        headers: {
          'content-type': 'application/json',
          'token': localStorage.getItem("token")
        },
        signal: controller.signal,
        openWhenHidden: true,
        onmessage(event) {
          if ( event.data === '&#92n[DONE]') {
            // 发送完成结束对话
            controller.abort();
            return;
          }
          videoContent.value = event.data.replaceAll("&#32;", " ").replaceAll("&#92n", "\n");
        },
        onclose(event) {
          console.log('关闭')
          controller.abort();
        },
        onerror(event) {
          ElMessage.error("对话失败，请重试");
          controller.abort();
        }
      });
    })
    // 当进入网页时 获取ai推荐的视频
    getAiRecommendVideo(router.currentRoute.value.params.id).then(response => {
      aiRecommendVideoList.value = response.data;
      console.log(aiRecommendVideoList.value)
    })
    // 收藏视频
    function collectVideo() {
      // 获取路径中的视频id
      let videoId = router.currentRoute.value.params.id;
      // 发送请求
      collectTargetVideo(videoId).then(response => {
        ElNotification({
          title: 'Success',
          message: collectState.value === true ? '取消收藏成功！' : '收藏成功!',
          type: 'success',
        })
        getVideoCollectState(router.currentRoute.value.params.id).then(response => {
          collectState.value = response.data;
        })
      })
    }
    /*--------------钩子函数---------------*/
    watch(volumeValue,(newValue,oldValue) => {
      let video = document.getElementById('video_html5_api');
      video.volume = newValue/100;
    })
    return {
      videoInfo,
      playing,
      targetTime,
      volumeValue,
      aiRecommendVideoList,
      videoSumDuration,
      videoPlayingDuration,
      tagItems,
      videoContent,
      collectState,
      nowText,
      nowColor,
      backHome,
      collectVideo,
      jumpToRecommendVideo,
      videoChangeActive,
      videoRemoveActive,
      volumeChangeActive,
      volumeRemoveActive,
      volumeControlChangeActive,
      volumeControlRemoveActive,
      videoPaused,
      videoPlayed,
      videoClick,
      videoFullScreen,
      videoTimeUpdate,
      progressMove,
      progressChangeActive,
      progressRemoveActive,
      formatDuration,
      jumpToTargetTime,
      fire,
      prepareForFire
    }
  }

}
</script>

<template>
  <div class="common-layout">
    <el-container class="outer-box">
      <el-card class="float-card" shadow="always">
        <template #header>
          <strong>智能提取视频内容</strong>
        </template>
        <div v-html="videoContent"></div>
      </el-card>
      <!--      头部搜索框-->
      <el-header style="margin-top: 2em">
        <el-row :gutter="24" class="header">
          <el-col :span="8">
            <el-card class="video-logo">
              <img
                  src="../../../assets/image/logo.png"
                  style="width: 70%;height: 70%;margin-left: 10px;"
              />
            </el-card>
          </el-col>

          <el-col :span="8">
          </el-col>

          <el-col :span="8">
            <el-card class="info">
              <el-button :type="collectState === true ? 'danger' : 'primary'" round @click="collectVideo">{{collectState === true ? '取消收藏' : '收藏本视频'}}</el-button>
              <el-button type="success" round @click="backHome()">返回主页</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-header>
      <!--      主体-->
      <el-main class="main-box">
        <div class="left-video-area">
          <!-- 视频播放 -->
          <div class="video-header">
            <div class="video-info-title">
              <div class="video-info-title-inner">
                <h1 class="video-title">{{videoInfo.title}}</h1>
              </div>
            </div>
            <div class="video-info-meta">
              <div class="video-info-detail-list">
                <div class="view item">
                  <el-icon class="item-icon">
                    <VideoPlay></VideoPlay>
                  </el-icon>
                  <div class="item-text">{{videoInfo.playCount}}</div>
                </div>
                <div class="collect item">
                  <el-icon class="item-icon">
                    <Star></Star>
                  </el-icon>
                  <div class="item-text">{{videoInfo.collectCount}}</div>
                </div>
                <div class="pubdate item">
                  <div class="item-text">{{videoInfo.createTime}}</div>
                </div>
                <div class="copyright item">
                  <el-icon class="item-icon">
                    <CircleCloseFilled></CircleCloseFilled>
                  </el-icon>
                  <div class="item-text">未经作者授权，禁止转载</div>
                </div>
              </div>
            </div>
          </div>
          <div class="video-playwrap">
            <div class="video-player-placeholder">
              <div class="video-player-placeholder-top"></div>
              <div class="video-player-placeholder-bottom">
                <div class="video-player-placeholder-bottom-left"></div>
                <div class="video-player-placeholder-bottom-right"></div>
              </div>
            </div>
            <div class="video-player">
              <div class="video-player-docker">
                <div class="video-player-container" @mouseenter="videoChangeActive($event)" @mouseleave="videoRemoveActive($event)">
                  <div class="video-player-primary-area">
                    <div class="video-player-area">
                      <div class="video-player-area-perch">
                        <div class="video-player-area-wrap">
                          <video-player :src="videoInfo.source" autoplay="autoplay" crossorigin="anonymous" preload="auto" id="video" @click="videoClick" @play="videoPlayed" @pause="videoPaused" @timeupdate="videoTimeUpdate" style="width: 100%;height: 100%" @loadedmetadata="prepareForFire"></video-player>
                          <canvas></canvas>
                        </div>
                      </div>
                      <div class="video-player-state-wrap">
                        <div class="video-player-state-play"></div>
                      </div>
                      <div class="video-player-control-wrap">
                        <div class="video-player-control-mask"></div>
                        <div class="video-player-control-entity">
                          <div class="video-player-control-top">
                            <div class="video-player-progress-area">
                              <div class="video-player-progress-freezone"></div>
                              <div class="video-player-progress-wrap">
                                <div class="video-player-progress" @click="jumpToTargetTime" @mousemove="progressMove($event)" @mouseenter="progressChangeActive($event)" @mouseleave="progressRemoveActive($event)">
                                  <div class="video-player-progress-schedule-wrap">
                                    <div class="video-player-progress-schedule">
                                      <div class="video-player-progress-schedule-buffer"></div>
                                      <div class="video-player-progress-schedule-current"></div>
                                    </div>
                                  </div>
                                  <div class="video-player-progress-point-wrap"></div>
                                  <div class="video-player-progress-thumb">
                                    <div class="video-player-progress-thumb-icon">
                                      <div>
                                        <img class="thumb-icon" src="../../../assets/icon/thumb.png" alt=""/>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="video-player-progress-move-indicator">
                                    <div class="video-player-progress-move-indicator-down"></div>
                                    <div class="video-player-progress-move-indicator-up"></div>
                                  </div>
                                  <div class="video-player-progress-popup">
                                    <div class="video-player-progress-preview">
                                      <div class="video-player-progress-preview-time">{{formatDuration(targetTime)}}</div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="video-player-control-bottom">
                            <div class="video-player-control-bottom-left">
                              <div class="video-player-ctrl-btn video-player-ctrl-play" aria-label="播放/暂停">
                                <div class="video-player-ctrl-btn-icon">
                                  <span class="video-common-el-icon">
                                    <el-icon class="video-common-icon" @click="videoClick" v-if="playing === true">
                                      <VideoPause></VideoPause>
                                    </el-icon>
                                    <el-icon class="video-common-icon" @click="videoClick" v-else>
                                      <VideoPlay></VideoPlay>
                                    </el-icon>
                                  </span>
                                </div>
                              </div>
                              <div class="video-player-ctrl-btn video-player-ctrl-btn-time">
                                <input class="video-player-ctrl-time-seek" value="00:00" style="display: none">
                                <div class="video-player-ctrl-time-label">
                                  <span class="video-player-ctrl-time-current">{{formatDuration(videoPlayingDuration)}}</span>
                                  <span class="video-player-ctrl-time-divide">/</span>
                                  <span class="video-player-ctrl-time-duration">{{formatDuration(videoSumDuration)}}</span>
                                </div>
                              </div>
                            </div>
                            <div class="video-player-control-bottom-center"></div>
                            <div class="video-player-control-bottom-right">
                              <div class="video-player-ctrl-btn video-player-ctrl-volume" role="button" aria-label="音量">
                                <div class="video-player-ctrl-btn-icon video-player-ctrl-volume-icon">
                                  <span class="video-common-el-icon">
                                    <el-icon class="video-common-icon" @click="volumeValue = 0" @mouseenter="volumeChangeActive($event)" @mouseleave="volumeRemoveActive($event)" v-if="volumeValue !== 0">
                                      <Microphone></Microphone>
                                    </el-icon>
                                    <el-icon class="video-common-icon" @click="volumeValue = 100" @mouseenter="volumeChangeActive($event)" @mouseleave="volumeRemoveActive($event)" v-else>
                                      <Mute></Mute>
                                    </el-icon>
                                  </span>
                                </div>
                                <div class="video-player-ctrl-volume-box" @mouseenter="volumeControlChangeActive($event)" @mouseleave="volumeControlRemoveActive($event)">
                                  <div class="video-player-ctrl-volume-number">{{volumeValue}}</div>
                                  <div class="video-player-ctrl-volume-progress">
                                    <div class="bui-area">
                                      <div class="bui-track">
                                        <el-slider v-model="volumeValue" vertical height="60px" :show-tooltip="false"/>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="video-player-ctrl-btn video-player-ctrl-full" role="button" aria-label="全屏">
                                <div class="video-player-ctrl-btn-icon">
                                  <span class="video-common-el-icon">
                                    <el-icon class="video-common-icon" @click="videoFullScreen">
                                      <FullScreen></FullScreen>
                                    </el-icon>
                                  </span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="video-player-shadow-progress-area">
                            <div class="video-player-shadow-progress-schedule-wrap">
                              <div class="video-player-shadow-progress-schedule">
                                <div class="video-player-shadow-progress-schedule-buffer"></div>
                                <div class="video-player-shadow-progress-schedule-current"></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 视频简介 + 视频标签 -->
          <div class="left-container-under-player">
            <div class="comment-input-area">
              <el-input v-model="nowText" placeholder="请输入内容" style="width: 90%;margin-right: 15px;"></el-input>
              <el-color-picker v-model="nowColor"></el-color-picker>
              <el-button type="primary" style="margin-left: 10px;" @click="fire">点我发送</el-button>
            </div>
            <div class="video-desc-container">
              <div class="basic-desc-info">
                <span class="desc-info-text">{{ videoInfo.description }}</span>
              </div>
              <div class="video-tag-container">
                <div class="tag-panel">
                  <el-tag
                      v-for="(item,index) in tagItems"
                      :key="index"
                      effect="dark"
                      round
                      style="margin-left: 10px"
                      color="#61666d"
                  >
                    {{ item }}
                  </el-tag>
                </div>
              </div>
              <div class="video-tag-container">

              </div>
            </div>
          </div>
          <!-- 未来可以继续写的地方：评论区 -->
        </div>
        <div class="right-recommend-area">
          <!-- 虚拟人 -->

          <!-- 推荐课程 -->
          <div class="bui-collapse-header">
            <div class="bui-collapse-area">
              <div class="bui-collapse-wrap">
                <el-icon style="vertical-align: middle">
                  <Link></Link>
                </el-icon>
                <span class="bui-collapse-name">推荐视频</span>
              </div>
            </div>
          </div>
          <div class="recommend-list">
            <div class="rec-list">
              <div class="video-page-card-small">
                <div class="card-box" v-for="(item,index) in aiRecommendVideoList" :key="index">
                  <div class="pic-box">
                    <div class="pic">
                      <div class="framepreview-box">
                        <a href="#" class="video-awesome-img">
                          <img class="cover-img" :src="item.cover" alt="" style="width: 100%;height: 100%" @click="jumpToRecommendVideo(item.id)"/>
                        </a>
                      </div>
                      <span class="mask-video"></span>
                      <span class="duration">01:26</span>
                    </div>
                  </div>
                  <div class="recommend-info">
                    <p class="title" @click="jumpToRecommendVideo(item.id)">{{item.title}}</p>
                    <div class="upname">
                      <el-icon>
                        <User></User>
                      </el-icon>
                      <span class="name">{{item.publisherName}}</span>
                    </div>
                    <div class="playinfo">
                      <el-icon>
                        <VideoPlay></VideoPlay>
                      </el-icon>
                      <span style="margin-left: 5px;">{{item.playCount}}</span>
                      <el-icon style="margin-left: 10px">
                        <Star></Star>
                      </el-icon>
                      <span style="margin-left: 5px;">{{item.collectCount}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
html,body,app {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0;
  /*外部间距也是如此设置*/
  margin: 0;
  /*统一设置高度为100%*/
  height: 100%;
  .common-layout {
    // 用100vw会出现左右滚动条
    width: 99vw;
    height: 100vh;
    background: -moz-linear-gradient(to bottom, #f3f5f8, #fff);
    background: linear-gradient(to bottom, #f3f5f8, #fff);
    .outer-box {
      position: relative;
      .float-card {
        position: absolute;
        right: 0;
        bottom: -7%;
        width: 400px;
        height: 120px;
        z-index: 100;
        backdrop-filter: blur(20px) saturate(180%);
        box-sizing: border-box;
        --un-shadow: 0 20px 25px -5px rgb(0 0 0 / .14), 0 8px 10px -6px rgb(0 0 0 / .12);
        box-shadow: 0 0 rgb(0 0 0 / 0), 0 0 rgb(0 0 0 / 0), var(--un-shadow);
        background-color: hsl(0 0% 100% / .8);
        border-radius: 12px;
      }
      .header {
        margin-top: 10px;
        height: 50px;

        .video-logo {
          margin-left: 50px;
          width: 13%;
          border-radius: 10px;
          height: 100%;

          .logo {
            margin-top: 5px;
            margin-left: 5px;
            height: 40px;
            width: 60px;
            display: block;
            vertical-align: middle;
          }
        }

        .video-logo:hover {
          background-color: #00a1d6;
        }

        .video-search-box {
          width: 95%;
          height: 100%;
          margin-left: 15px;
          display: flex;
          align-content: center;

          .video-search {
            width: 100%;
            height: 100%;
          }

          // 修改el-input圆角
          .video-search /deep/ .el-input__wrapper {
            border-radius: 50px;
          }
        }

        .info {
          width: 40%;
          height: 80%;
          float: right;
          border-radius: 50px;
          margin-right: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .header /deep/ .el-card__body {
        padding: 0;
      }

      .main-box {
        width: 1680px;
        margin: 0 auto;
        position: relative;
        padding: 0;
        display: flex;
        box-sizing: content-box;

        .left-video-area {
          position: sticky;
          height: fit-content;
          z-index: 1;
          width: 1080px;
          margin-left: 40px;

          .video-header {
            height: 108px;
            padding-top: 22px;
            --keep-blank-space: 30px;
            position: relative;
            box-sizing: border-box;

            .video-info-title {
              position: relative;
              margin: 0;
              padding: 0;

              .video-info-title-inner {
                display: flex;
                align-items: center;
                overflow: hidden;
                position: relative;

                .video-title {
                  font-size: 22px;
                  line-height: 34px;
                  flex-shrink: 0;
                  font-weight: 500;
                  color: #18191c;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }

            .video-info-meta {
              margin-top: -12px;
              position: relative;
              display: flex;
              align-items: center;

              .video-info-detail-list {
                flex: 1;
                font-size: 13px;
                color: #9499a0;
                display: flex;
                align-items: center;
                height: 24px;
                overflow: hidden;
                box-sizing: border-box;

                .item {
                  flex-shrink: 0;
                  margin-right: 12px;
                  overflow: hidden;
                }

                .view, .collect {
                  display: inline-flex;
                  align-items: center;
                }

                .pubdate {
                  display: flex;
                  align-items: center;
                  font-size: 13px;
                }

                .copyright {
                  margin-right: 0;
                  display: inline-flex;
                  align-items: center;
                }

                .view, .collect, .pubdate, .copyright {
                  .item-icon {
                    flex-shrink: 0;
                    width: 20px;
                    height: 20px;
                    margin-right: 4px;
                  }

                  .item-text {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }

          .video-playwrap {
            margin-top: 15px;
            height: 540px;
            position: relative;

            .video-player {
              width: 1080px;
              height: 540px;
              position: static;

              .video-player-docker {
                height: 100%;
                position: relative;
                width: 100%;
                font-size: 12px;
                font-style: normal;
                line-height: 1;

                .video-player-container {
                  box-shadow: 0 0 8px #1f2223;
                  -webkit-box-shadow: 0 0 8px #e5e9ef;
                  height: 100%;
                  position: relative;
                  width: 100%;

                  .video-player-primary-area {
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    -ms-flex-wrap: nowrap;
                    flex-wrap: nowrap;
                    height: 100%;
                    width: 100%;

                    .video-player-area {
                      -webkit-box-flex: 1;
                      -ms-flex: 1;
                      flex: 1;
                      overflow: hidden;
                      position: relative;

                      .video-player-area-perch {
                        cursor: pointer;
                        -webkit-box-flex: 0;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -ms-flex: none;
                        flex: none;
                        height: 100%;
                        justify-content: center;
                        position: relative;
                        width: 100%;

                        .video-player-area-wrap {
                          box-sizing: border-box;
                          display: block;
                          height: 100%;
                          width: 100%;
                          canvas{
                            pointer-events: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                          }

                          video {
                            content-visibility: visible;
                            display: block;
                            height: 100%;
                            margin: auto;
                            width: 100%;
                            mix-blend-mode: screen;
                            object-fit: fill;
                          }

                          video:focus {
                            outline: none;
                          }
                        }
                      }

                      .video-player-state-wrap {
                        bottom: 62px;
                        cursor: pointer;
                        pointer-events: none;
                        position: absolute;
                        right: 34px;
                        z-index: 48;

                        .video-player-state-play {
                          background: url(//s1.hdslb.com/bfs/static/player/img/play.svg) 50% no-repeat;
                          display: none;
                          height: 64px;
                          width: 64px;
                        }
                      }

                      .video-player-control-wrap {
                        bottom: 0;
                        left: 0;
                        position: absolute;
                        width: 100%;
                        z-index: 75;

                        .video-player-control-mask {
                          opacity: 0;
                          background-color: initial;
                          bottom: 0;
                          height: 100px;
                          left: 0;
                          pointer-events: none;
                          position: absolute;
                          -webkit-transition: opacity .2s ease-in-out;
                          transition: opacity .2s ease-in-out;
                          width: 100%;
                          z-index: -1;
                        }

                        .video-player-control-entity {
                          .video-player-control-top {
                            opacity: 0;
                            visibility: hidden;
                            box-sizing: border-box;
                            padding: 0 12px;
                            bottom: 44px;
                            left: 0;
                            position: absolute;
                            right: 0;
                            -webkit-transition: opacity .2s ease-out;
                            transition: opacity .2s ease-out;

                            .video-player-progress-area {
                              position: relative;

                              .video-player-progress-freezone {
                                pointer-events: none;
                              }

                              .video-player-progress-wrap {
                                -webkit-box-align: end;
                                -ms-flex-align: end;
                                align-items: flex-end;
                                cursor: pointer;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                height: 10px;
                                padding-bottom: 6px;

                                .video-player-progress {
                                  -webkit-box-align: center;
                                  -ms-flex-align: center;
                                  align-items: center;
                                  display: -webkit-box;
                                  display: -ms-flexbox;
                                  display: flex;
                                  height: 2px;
                                  position: relative;
                                  width: 100%;

                                  .video-player-progress-schedule-wrap {
                                    height: 100%;
                                    position: absolute;
                                    width: 100%;

                                    .video-player-progress-schedule {
                                      background-color: rgba(24, 26, 27, 0.2);
                                      border-radius: 1.5px;
                                      bottom: 0;
                                      left: 0;
                                      overflow: hidden;
                                      position: absolute;
                                      right: 0;
                                      top: 0;

                                      .video-player-progress-schedule-buffer {
                                        background-color: rgba(24, 26, 27, 0.3);
                                        bottom: 0;
                                        left: 0;
                                        position: absolute;
                                        right: 0;
                                        top: 0;
                                        -webkit-transform: scaleX(0);
                                        transform: scaleX(0);
                                        -webkit-transform-origin: 0 0;
                                        transform-origin: 0 0;
                                      }

                                      .video-player-progress-schedule-current {
                                        background-color: #008bbd;
                                        bottom: 0;
                                        left: 0;
                                        position: absolute;
                                        right: 0;
                                        top: 0;
                                        -webkit-transform: scaleX(0);
                                        transform: scaleX(0);
                                        -webkit-transform-origin: 0 0;
                                        transform-origin: 0 0;
                                      }
                                    }
                                  }

                                  .video-player-progress-point-wrap {
                                    height: 100%;
                                    left: 0;
                                    pointer-events: none;
                                    position: absolute;
                                    top: 0;
                                    width: 100%;
                                  }

                                  .video-player-progress-thumb {
                                    height: 15px;
                                    pointer-events: none;
                                    width: 15px;

                                    .video-player-progress-thumb-icon {
                                      opacity: 0;
                                      visibility: hidden;
                                      height: 100%;
                                      line-height: 12px;
                                      -webkit-transition: all .2s;
                                      transition: all .2s;
                                      width: 100%;

                                      .thumb-icon {
                                        width: 100%;
                                        height: 100%;
                                        transform: translate3d(0px, 0px, 0px);
                                        overflow: hidden;
                                      }
                                    }
                                  }

                                  .video-player-progress-move-indicator {
                                    height: 16px;
                                    margin-left: -4px;
                                    opacity: 0;
                                    overflow: hidden;
                                    pointer-events: none;
                                    position: absolute;
                                    -webkit-transition: opacity .1s;
                                    transition: opacity .1s;
                                    visibility: hidden;
                                    width: 8px;

                                    div {
                                      border-style: solid;
                                      height: 0;
                                      position: relative;
                                      width: 0;
                                    }

                                    .video-player-progress-move-indicator-down {
                                      border-color: #00a1d6 transparent transparent;
                                      border-width: 4px 4px 0;
                                    }

                                    .video-player-progress-move-indicator-up {
                                      border-color: transparent transparent #00a1d6;
                                      border-width: 0 4px 4px;
                                      margin-top: 8px;
                                    }
                                  }

                                  .video-player-progress-popup {
                                    background-color: transparent;
                                    border-radius: 2px;
                                    bottom: 22px;
                                    display: none;
                                    line-height: 36px;
                                    overflow: hidden;
                                    pointer-events: none;
                                    position: absolute;
                                    width: 160px;
                                    margin-left: -35px;

                                    .video-player-progress-preview {
                                      height: 90px;
                                      position: relative;
                                      width: 160px;

                                      .video-player-progress-preview-time {
                                        background-color: hsla(0, 0%, 8%, .9);
                                        border-radius: 2px;
                                        bottom: 0;
                                        color: #fff;
                                        display: inline-block;
                                        font-size: 12px;
                                        height: 18px;
                                        left: 20%;
                                        line-height: 18px;
                                        padding: 0 5px;
                                        position: absolute;
                                        transform: translateX(-50%);
                                        vertical-align: bottom;
                                      }
                                    }
                                  }
                                }

                                .video-player-progress:hover {
                                  height: 4px;
                                }
                              }
                            }
                          }

                          .video-player-control-bottom {
                            opacity: 0;
                            -webkit-box-pack: justify;
                            -ms-flex-pack: justify;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            height: 35px;
                            justify-content: space-between;
                            line-height: 22px;
                            margin: 20px 0 0;
                            -webkit-transition: all .2s ease-out;
                            transition: all .2s ease-out;
                            width: 100%;
                            box-sizing: border-box;
                            padding: 0 12px;

                            .video-player-control-bottom-left {
                              -webkit-box-flex: 0;
                              display: -ms-inline-flexbox;
                              display: inline-flex;
                              -ms-flex: none;
                              flex: none;

                              .video-player-ctrl-btn-time {
                                font-size: 12px;
                                margin-right: 10px;
                                min-width: 90px;

                                .video-player-ctrl-time-seek {
                                  outline: none;
                                  -webkit-text-decoration: none;
                                  text-decoration: none;
                                }

                                .video-player-ctrl-time-label {
                                  height: 100%;
                                  position: absolute;
                                  text-align: center;
                                  white-space: nowrap;
                                  width: 100%;

                                  .video-player-ctrl-time-divide {
                                    padding: 0 2px;
                                  }
                                }
                              }

                              [role=button], input:not([type=range]) {
                                touch-action: manipulation;
                              }
                            }

                            .video-player-control-bottom-right {
                              -webkit-box-pack: end;
                              -ms-flex-pack: end;
                              display: -ms-flexbox;
                              display: flex;
                              justify-content: flex-end;

                              .video-player-ctrl-volume {
                                .video-player-ctrl-volume-box {
                                  background: hsla(0, 0%, 8%, .9);
                                  border-radius: 2px;
                                  bottom: 41px;
                                  display: none;
                                  height: 100px;
                                  left: 50%;
                                  margin-left: -16px;
                                  position: absolute;
                                  width: 32px;

                                  .video-player-ctrl-volume-number {
                                    color: #e5e9ef;
                                    font-size: 12px;
                                    height: 28px;
                                    line-height: 28px;
                                    margin-bottom: 2px;
                                    text-align: center;
                                    width: 100%;
                                  }

                                  .video-player-ctrl-volume-progress {
                                    height: 60px !important;
                                    margin: 0 auto;
                                    cursor: pointer;
                                    -webkit-box-align: center;
                                    -ms-flex-align: center;
                                    -webkit-box-pack: start;
                                    -ms-flex-pack: start;
                                    align-items: center;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    justify-content: flex-start;
                                    vertical-align: middle;

                                    .bui-area {
                                      -webkit-box-pack: center !important;
                                      -ms-flex-pack: center !important;
                                      justify-content: center !important;
                                      -webkit-box-align: center;
                                      -ms-flex-align: center;
                                      align-items: center;
                                      display: -webkit-box;
                                      display: -ms-flexbox;
                                      display: flex;
                                      height: 100%;
                                      line-height: normal;
                                      -webkit-user-select: none;
                                      -moz-user-select: none;
                                      -ms-user-select: none;
                                      user-select: none;
                                      vertical-align: middle;
                                      width: 100%;

                                      .bui-track {
                                        -webkit-box-align: end;
                                        -ms-flex-align: end;
                                        align-items: flex-end;
                                        height: 100%;
                                        width: 2px;
                                        display: -webkit-box;
                                        display: -ms-flexbox;
                                        display: flex;
                                        position: relative;
                                      }

                                      .bui-track /deep/ .el-slider {
                                        box-sizing: border-box;
                                        border-radius: 1.5px;
                                        bottom: 0;
                                        position: absolute;
                                        left: 20px;
                                        top: 0;
                                      }

                                      .bui-track /deep/ .el-slider__button { // 拖动的滑块的样式
                                        bottom: -10px;
                                        left: 12.2px;
                                        position: relative;
                                        top: auto;
                                        cursor: pointer;
                                        -webkit-box-align: center;
                                        -ms-flex-align: center;
                                        align-items: center;
                                        background-color: #00a1d6;
                                        border-radius: 50%;
                                        display: -webkit-box;
                                        display: -ms-flexbox;
                                        display: flex;
                                        height: 12px;
                                        -webkit-transform: translateZ(0);
                                        transform: translateZ(0);
                                        -webkit-transition: all .2s;
                                        transition: all .2s;
                                        vertical-align: middle;
                                        width: 12px;
                                      }

                                      .bui-track /deep/ .el-slider__runway {
                                        background-color: #fff;
                                        bottom: 0;
                                        position: absolute;
                                        right: 0;
                                        top: 0;
                                      }

                                      .bui-track /deep/ .el-slider__bar {
                                        background: #00a1d6;
                                      }
                                    }
                                  }
                                }

                                .video-player-ctrl-volume:hover {
                                  margin-top: -10px;
                                  padding-top: 10px;
                                }
                              }
                            }
                          }

                          .video-player-shadow-progress-area {
                            opacity: 1;
                            visibility: visible;
                            bottom: 0;
                            height: 3px;
                            left: 0;
                            position: absolute;
                            right: 0;
                            -webkit-transition: opacity .4s ease-in;
                            transition: opacity .4s ease-in;

                            .video-player-shadow-progress-schedule-wrap {
                              height: 100%;
                              position: relative;
                              width: 100%;

                              .video-player-shadow-progress-schedule {
                                background-color: hsla(0, 0%, 100%, .2);
                                border-radius: 1.5px;
                                bottom: 0;
                                left: 0;
                                overflow: hidden;
                                position: absolute;
                                right: 0;
                                top: 0;

                                .video-player-shadow-progress-schedule-buffer {
                                  background-color: hsla(0, 0%, 100%, .3);
                                  bottom: 0;
                                  left: 0;
                                  position: absolute;
                                  right: 0;
                                  top: 0;
                                  transform-origin: 0 0;
                                }

                                .video-player-shadow-progress-schedule-current {
                                  background-color: #00a1d6;
                                  bottom: 0;
                                  left: 0;
                                  position: absolute;
                                  right: 0;
                                  top: 0;
                                  transform-origin: 0 0;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .left-container-under-player {
            .comment-input-area {
              width: 100%;
              height: 100%;
              display: flex;
              align-content: center;
              justify-content: center;
              margin-top: 10px;
              margin-bottom: -5px;
            }
            .video-desc-container {
              margin: 18px 0;

              .basic-desc-info {
                white-space: pre-line;
                letter-spacing: 0;
                color: #18191c;
                font-size: 15px;
                line-height: 24px;
                overflow: hidden;

                .desc-info-text {
                }
              }
            }

            .video-tag-container {
              display: flex;
              margin-top: 18px;
              padding-bottom: 10px;
              border-bottom: 1px solid #e3e5e7;

              .tag-panel {
                transition: height 0.3s;
                overflow: hidden;
              }
            }
          }
        }

        .right-recommend-area {
          position: sticky;
          height: fit-content;
          margin-top: 60px;
          margin-left: 40px;

          .bui-collapse-header {
            border-radius: 6px;
            align-items: center;
            display: flex;
            background: #f1f2f3;
            box-sizing: border-box;
            color: #222;
            height: 40px;
            position: relative;
            width: 450px;
            vertical-align: middle;

            .bui-collapse-wrap {
              margin-left: 20px;
              fill: #61666d;

              .bui-collapse-name {
                margin-left: 5px;
                vertical-align: middle;
              }
            }
          }

          .recommend-list {
            margin-top: 20px;

            .rec-list {
              .video-page-card-small {
                margin-bottom: 16px;

                .card-box {
                  margin-top: 30px;
                  display: flex;

                  .pic-box {
                    width: 189px;
                    height: 107px;
                    position: relative;
                    border-radius: 6px;
                    background: #c9ccd0;
                    flex: 0 0 auto;

                    .pic {
                      position: relative;
                      overflow: hidden;
                      border-radius: 6px;
                      width: 100%;
                      height: 100%;

                      .framepreview-box {
                        height: calc(100% + 10px);
                        position: absolute;
                        width: 100%;
                        bottom: 0;

                        .video-awesome-img {
                          width: 189px;
                          height: 107px;
                          display: block;
                          position: absolute;
                          top: 10px;
                        }
                      }

                      .mask-video {
                        opacity: 0;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgb(131 131 145 / 43%);
                        transition: opacity 0.3s;
                        pointer-events: none;
                      }

                      .duration {
                        font-size: 14px;
                        line-height: 21px;
                        height: 21px;
                        position: absolute;
                        bottom: 6px;
                        right: 6px;
                        color: #FFFFFF;
                        transition: opacity 0.3s;
                        z-index: 5;
                        background-color: rgba(0, 0, 0, 0.4);
                        border-radius: 2px;
                        padding: 0 4px;
                      }
                    }

                    .pic:hover .mask-video {
                      opacity: 1;
                    }
                  }

                  .recommend-info {
                    margin-top: -16px;
                    font-size: 14px;
                    line-height: 16px;
                    margin-left: 10px;
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .title {
                      font-size: 16px;
                      line-height: 20px;
                      cursor: pointer;
                      display: -webkit-box;
                      text-overflow: ellipsis;
                      font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
                      font-weight: 500;
                    }

                    .upname {
                      margin-top: -5px;
                      cursor: pointer;
                      display: inline-flex;
                      font-size: 15px;

                      .name {
                        margin-left: 5px;
                        color: #9499a0;
                        width: 100%;
                        height: 100%;
                      }
                    }

                    .playinfo {
                      margin-top: 10px;
                      color: #9499a0;
                      font-size: 15px;
                      display: inline-flex;
                      align-items: center;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.video-player-ctrl-btn {
  fill: #fff;
  color: hsla(0, 0%, 100%, .8);
  height: 22px;
  line-height: 22px;
  outline: 0;
  position: relative;
  text-align: center;
  width: 40px;
  z-index: 2;
}
.video-common-el-icon {
  height: 22px;
  opacity: .9;
  display: inline-flex;
  user-select: none;
  width: 100%;
  .video-common-icon {
    width: 100%;
    height: 100%;
    transform: none !important;
    transition: fill .15s ease-in-out;
  }
}
.video-player-ctrl-btn-icon {
  cursor: pointer;
  width: 100%;
}
</style>
